<template>
  <div class="form-content">
    <el-form
      ref="formRef"
      label-position="top"
      :model="form"
      :rules="formRules"
      class="form-content"
    >
      <el-form-item label="站点名称" prop="siteName">
        <el-input type="text" v-model="form.siteName"  placeholder="请输入站点名称" />
      </el-form-item>
      <el-form-item label="备案号" prop="recordNo">
        <el-input type="text" v-model="form.recordNo"  placeholder="请输入备案号" />
      </el-form-item>
      <el-form-item label="版权标识" prop="copyright">
        <el-input type="text" v-model="form.copyright"  placeholder="请输入版权标识" />
      </el-form-item>
      <el-form-item label="版本号" prop="version">
        <el-input type="text" v-model="form.version"  placeholder="请输入版本号" />
      </el-form-item>
      <el-form-item label="站点 Logo" prop="siteLogo">
        <GcUploadImage :imageUrl="form.siteLogo" @get-image="(url: string) => form.siteLogo = url" />
      </el-form-item>
    </el-form>
    <footer v-permission="'system-config-permission:btn:edit'">
      <el-button type="primary" @click="submitConfigInfo">立即保存</el-button>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ruleRequired, ruleMaxLength, RULE_VERSION } from '@/utils/rules'
import { ElMessage } from 'element-plus'
import { apiSetConfig } from '@/http/service'

const props = defineProps({
  configForm: {
    type: Object,
    default: () => null
  }
})
const form = reactive({
  siteName: '',
  recordNo: null,
  copyright: '',
  version: '',
  siteLogo: ''
})
const formRules = reactive<FormRules>({
  siteName: [ruleRequired('请输入站点名称'), ruleMaxLength(32)],
  recordNo: [ruleRequired('请输入备案号'), ruleMaxLength(32)],
  copyright: [ruleRequired('请输入版权标识'), ruleMaxLength(32)],
  version: [ruleRequired('请输入版本号'), ruleMaxLength(10), RULE_VERSION]
})
const formRef = ref<null | FormInstance>(null)

watch(() => props.configForm, val => {
  if (val) {
    const { siteName, recordNo, copyright, version, siteLogo } = val
    Object.assign(form, {
      siteName, recordNo, copyright, version, siteLogo
    })
  }
})

async function submitConfigInfo () {
  const valid = await formRef.value?.validate()
  if (valid) {
    await apiSetConfig(form)
    ElMessage.success('更新基础配置信息成功')
  }
}
</script>

<style lang="scss" scoped>
.form-content {
  padding: 10px 20px 0;
  width: 800px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-form {
    flex: 1;
  }
  footer {
    padding-left: 20px;
  }
}
</style>
